<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo02-列表渲染</title>
  </head>
  <body>
    <div id="app">
      <h1>{{message}}</h1>
      <ul>
        <li v-for="(sport,index) of sports"sport v-text="sport"><li>
        <input type="text" id="sport">
        <button type="button" id="addSport">添加</button>
      </ul>
    </div>
    <script src="https://unpkg.com/vue@2.1.3/dist/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          message: '列表渲染',
          sports: ['篮球','足球','乒乓球','羽毛球']
        },
        mounted () {
          document.getElementById('addSport').addEventListener('click',function () {
            var sport = document.getElementById('sport')
            if (sport.value) {
              app.sports.push(sport.value)
              sport.value = ''
            }
          })
        }
      })
    </script>
  </body>
</html>
